<template>
    <el-button
        :loading="isOperationDisabled"
        :disabled="isOperationDisabled"
        @click="handleClick"
    >
        <slot></slot>
    </el-button>
</template>

<script>
    export default {
        name: "ScButton",
        props: {
            asyncClick: {
                type: Function
            }
        },
        data() {
            return {
                isOperationDisabled: false
            };
        },
        methods: {
            /**
             * 点击事件时先禁用
             */
            async handleClick(event) {
                this.isOperationDisabled = true;
                try {
                    this.asyncClick && await this.asyncClick(event);
                } finally {
                    this.isOperationDisabled = false;
                }
            }
        }
    };
</script>
